
<template>
  <div class="publish-record-page" :style="'padding-top:'+headHeight+'rpx;'" >
      <head-back title="发布记录" @goBack="goBack"></head-back> 

    <div class="topbar-box">
      <div class="topbar">
          <div class="item " :class="tabsIndex==1?'active':''" @click.stop="changeTab(1)">提个问题</div>
          <div class="item" :class="tabsIndex==2?'active':''"   @click.stop="changeTab(2)">写个心情</div>
      </div>
    </div>

    <!-- 热词-->
    <div class="hot-entry" v-if="tabsIndex==1">
      <block v-if="topicData.length > 0">
            <p @click="clickTag(item)" v-for="(item,index) in topicData" class="item" :key="index" :class="['word'+(index) % 3,item.id == selectTagId ? 'word-active' : '']" topicId="item.id">{{item.title}}</p>
        </block>
    </div>

    <!--信息-->
      <div class="info" v-for="(item,index) in topicArticleData" :key="index" topicArticleId="item.id">
        <!--头像-->
        <div class="head" v-if="item.user_info!=null">
            <image-loader :src="item.user_info.wx_header" image-style="width: 80rpx;height:80rpx; border-radius: 50%;" ></image-loader>
        </div>
        <!--昵称，日期-->
        <div class="info-right">
          <div class="name-date"  v-if="item.user_info!=null">
            <p class="name">{{item.user_info.nickname}}</p>
            <p class="date">{{item.create_time}}</p>
          </div>
          <!--内容-->
          <div class="content">
            <p class="content-title">{{item.content}}</p>
            <div class="content-img" v-if="item.img_json && item.img_json.length >0"> 
              <image-loader v-for="(img,imgKey) in item.img_json" :key="imgKey" :src="img.src"   @click.stop="previewImage(item,img)" image-style="margin:0 6rpx 8rpx 0;width:189rpx;height: 189rpx;border-radius: 8rpx;" ></image-loader> 
            </div>
            <div class="handle">
              <div class="msg">{{item.comment_num}}</div>
              <div class="like" :class="item.user_like == 1 ? 'like-active' : ''" @click="userLikeArticle(item,index)">{{item.like_num}}</div>
            </div>
          </div>
          <!--留言-->
          <div class="comment-box" v-if="item.comments.length>0">
            <div v-for="(comment,key) in item.comments" :key="key">
            <p class="comment">
                <span class="name">{{comment.nickname}}：</span>
                {{comment.content}}
            </p>
            <p class="comment" v-for="(child,childKey) in comment.child" :key="childKey">
              <span class="name">{{child.nickname}}</span>
              回复
              <span class="name">{{comment.nickname}}：</span>
              {{child.content}}
            </p>
            </div>
          </div>
        </div>
      </div>
      <div class="not-data" v-if="!is_load">———— 没有数据啦 ————</div>
  </div>
</template> 
<script> 
  import headBack from '@/components/head-back' ;
  import * as api from '@/utils/api' ;
  const app = getApp();
  
  export default {
    onLoad(){
        wx.showLoading({title:'加载中'})
        this.getTopicList();//话题标签
        this.getTopicArticleList();//话题下文章列表
    },
    onShow: function () {

    },

    data () {
        return {
            headPadding:wx.getStorageSync('headPadding'), 
            headHeight:wx.getStorageSync('headHeight'), 
            tabsIndex:1,
            topicData:[],
            topicArticleData:[],
            is_load:true,
            selectPage:1,
            selectTagId:1
        }
    },

    components:{
        headBack 
    },
    //上拉刷新
    onReachBottom:function(){
      let vm = this;
      if(vm._data.is_load){
        vm.getTopicArticleList()
      }
    },
    methods: {
        goBack(){ 
            setTimeout(()=>{
                wx.navigateBack({ delta: 1 });
            },300);
        }, 
        getTopicList(){
              let vm = this;
              api.topicList().then(res => {
                if(res.status == 200){
                  vm._data.topicData = res.data.data;
                  vm._data.selectTagId = res.data.data[0].id
                }
              });
        },
        changeTab(val){
            this.tabsIndex=val;
            this.topicArticleData=[];
            this._data.selectPage=1;
            if(val==1){
                this._data.selectTagId=1;
                this.getTopicArticleList();
            }else{
                this._data.selectTagId=2;
                this.getTopicArticleList();  
            }
            
        },
        //话题下文章列表
        getTopicArticleList(){
          let vm = this;
          //如果要判断点赞状态，必须登录参数 user_id
          api.topicUserArticleList({tag_id:vm._data.selectTagId,page:vm._data.selectPage,user_id:wx.getStorageSync('userInfo').id,is_user:true}).then(res=>{
            if(res.data.code == 200){
                  if(vm._data.topicArticleData.length>0){
                    vm._data.topicArticleData = vm._data.topicArticleData.concat(res.data.data)
                  }else{
                    vm._data.topicArticleData = res.data.data;
                  }
                  if(res.data.data.length == 0){
                    vm._data.is_load = false;
                  }else{
                    vm._data.is_load = true;
                    vm._data.selectPage = vm._data.selectPage +1;
                  }
            }
          })
        },
        //点击tag标签，获取下属文章分页
        clickTag(item){
         let vm = this;
          //选中tag
          vm._data.selectTagId = item.id;
          //重置page
          vm._data.selectPage = 1;
          //重置Article
          vm._data.topicArticleData = [];
          wx.showLoading({title:'加载中'})
          //选中tag下的文章列表
          vm.getTopicArticleList();
        },
        //浏览大图
        previewImage(item,url){ 
            console.log(item,url)
            let vm = this;
            let urls = [];
            if(item.img_json)
            item.img_json.forEach((list,index)=>{ 
                urls.push(list.src);
            });
            console.log(item);
            wx.previewImage({
                current: url.src, // 当前显示图片的http链接
                urls: urls // 需要预览的图片http链接列表
            })
        },
    },
  }
</script>

<style lang="scss" scoped>
  .publish-record-page{
    width:100%;
    height:100%;
    color:#000;
    background: #ffffff;
    .nav{height: 162rpx;text-align: center}

    .topbar-box{
      width: 100%;
      height: 94rpx;
      padding-left: 33rpx;
      border-bottom: rgba(178,182,192,0.19) solid 1rpx;
      box-sizing: border-box;

      .topbar{
        width: 100%;
        height: 94rpx;
        display: inline-flex;
        white-space: nowrap;
        justify-content: center;
        inline-height: 94rpx;

        .item{
          margin-right: 50rpx;
          height: 94rpx;
          line-height: 94rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #0E0E0E;
          display: inline-block;
        }
        .item.active{position:relative;color:#538EF2;}
        .item.active:after{
          position: absolute;
          bottom: 10rpx;
          left: 50%;
          margin-left: -15%;
          width: 30%;
          height: 6rpx;
          background:linear-gradient(-35deg,rgba(83,142,242,1),rgba(77,106,235,1));
          content: ''
        }
      }
    }

    //热门词条
    .hot-entry{
      padding: 32rpx 33rpx 0 33rpx;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;

      .item{
        margin-right: 29rpx;
        margin-bottom: 24rpx;
        padding: 19rpx 23rpx;
        border-radius: 32rpx;
        background: #FEF4F4;
        font-size: 26rpx;
        color: #4F87FA;
        text-align: center;
        display: inline-block;
      }
      .word0{background: #F2F7FE;color: #4F87FA;}
      .word1{background: #FEF4F4;color: #F95A44;}
      .word2{background: #EEFEF1;color: #41B957;}
    }

    //发布的信息
    .info{
      padding: 32rpx 33rpx;
      display: flex;
      align-items: stretch;
      /*justify-content: center;*/
      border-bottom: #EEEEEE solid 2rpx;

      //头像
      .head{
        margin-right: 20rpx;
        width: 80rpx;
        height: 80rpx;

        img{width: 80rpx;height:80rpx; border-radius: 50%;}
      }
      .info-right{
          width:100%;
        .name-date{
          height: 80rpx;
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          .name{
            flex: 1;
            font-size: 26rpx;
            color: #4268BE;
            font-weight: 600;
          }
          .date{color: #999999;font-size: 22rpx;}
        }
        .content{
          .content-title{
            margin: 22rpx 0;
            font-size: 30rpx;
            color: #333333;
          }
          .content-img{
            display: flex;
            flex-wrap: wrap;
            // align-items: center;
            // justify-content: space-evenly; 
          }
        }
        .handle{
          margin: 32rpx 8rpx 32rpx 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 24rpx;
          color: #999999;

          .msg{
            margin-right: 54rpx;
            padding-left: 36rpx;
            background: url("../../../../static/image/xxm/comments.png") center center no-repeat;
            background-size: 26rpx 24rpx;
            background-position: 0;
          }

          .like{
            padding-left: 36rpx;
            background: url("../../../../static/image/xxm/like.png") center center no-repeat;
            background-size: 26rpx 24rpx;
            background-position: 0;
          }
          .like-active{
            background: url("../../../../static/image/xxm/like-active.png") center center no-repeat;
            background-size: 26rpx 24rpx;
            background-position: 0;
          }
        }
      }
    }

    //评论
    .comment-box{
      padding: 17rpx 15rpx;
      background: #F7F7F7;
      font-size: 28rpx;
      color: #333333;

      .comment{
        margin-bottom: 23rpx;
        .name{color:#4268BE;font-weight:600;}
      }
    }
  }

</style>
